import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { ArrowRight, Building2, Quote } from 'lucide-react';

interface CaseStudy {
  id: string;
  company: string;
  industry: string;
  logo?: string;
  challenge: string;
  solution: string;
  results: {
    metric: string;
    value: string;
    improvement: string;
  }[];
  quote: {
    text: string;
    author: string;
    position: string;
  };
  tags: string[];
}

interface CaseStudiesProps {
  studies: CaseStudy[];
  title?: string;
  description?: string;
  showAll?: boolean;
}

/**
 * 客户案例展示组件
 * 用于展示CActor在各个领域的成功应用案例
 */
export function CaseStudies({
  studies,
  title = '客户成功案例',
  description = '真实的业务价值和效果验证',
  showAll = false,
}: CaseStudiesProps) {
  const displayStudies = showAll ? studies : studies.slice(0, 3);

  return (
    <section className="py-16 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold mb-4">{title}</h2>
          <p className="text-lg text-muted-foreground">{description}</p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
          {displayStudies.map(study => (
            <CaseStudyCard key={study.id} study={study} />
          ))}
        </div>

        {!showAll && studies.length > 3 && (
          <div className="text-center mt-12">
            <Button variant="outline" size="lg">
              查看更多案例
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        )}
      </div>
    </section>
  );
}

/**
 * 单个案例卡片组件
 */
function CaseStudyCard({ study }: { study: CaseStudy }) {
  return (
    <Card className="group hover:shadow-xl transition-all duration-300 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0 h-full">
      <CardHeader className="pb-4">
        <div className="flex items-center gap-3 mb-4">
          <div className="bg-gradient-to-br from-blue-500 to-purple-600 p-3 rounded-lg text-white">
            <Building2 className="h-6 w-6" />
          </div>
          <div>
            <CardTitle className="text-xl group-hover:text-blue-600 transition-colors">
              {study.company}
            </CardTitle>
            <CardDescription className="text-sm">
              {study.industry}
            </CardDescription>
          </div>
        </div>

        <div className="flex flex-wrap gap-2 mb-4">
          {study.tags.map(tag => (
            <Badge key={tag} variant="outline" className="text-xs">
              {tag}
            </Badge>
          ))}
        </div>
      </CardHeader>

      <CardContent className="space-y-6">
        {/* 挑战与解决方案 */}
        <div className="space-y-4">
          <div>
            <h4 className="font-semibold text-sm mb-2 text-red-600">
              业务挑战
            </h4>
            <p className="text-sm text-muted-foreground leading-relaxed">
              {study.challenge}
            </p>
          </div>

          <div>
            <h4 className="font-semibold text-sm mb-2 text-blue-600">
              解决方案
            </h4>
            <p className="text-sm text-muted-foreground leading-relaxed">
              {study.solution}
            </p>
          </div>
        </div>

        {/* 业务成果 */}
        <div>
          <h4 className="font-semibold text-sm mb-3 text-green-600">
            业务成果
          </h4>
          <div className="grid grid-cols-1 gap-3">
            {study.results.map((result, index) => (
              <div
                key={index}
                className="bg-slate-50 dark:bg-slate-700/50 p-3 rounded-lg"
              >
                <div className="flex items-center justify-between mb-1">
                  <span className="text-xs text-muted-foreground">
                    {result.metric}
                  </span>
                  <Badge
                    variant="secondary"
                    className="bg-green-100 text-green-800 text-xs"
                  >
                    {result.improvement}
                  </Badge>
                </div>
                <div className="font-bold text-lg text-green-600">
                  {result.value}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 客户评价 */}
        <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-slate-700 dark:to-slate-600 p-4 rounded-lg">
          <Quote className="h-5 w-5 text-blue-500 mb-2" />
          <blockquote className="text-sm italic text-muted-foreground mb-3 leading-relaxed">
            &ldquo;{study.quote.text}&rdquo;
          </blockquote>
          <div className="text-xs">
            <div className="font-semibold">{study.quote.author}</div>
            <div className="text-muted-foreground">{study.quote.position}</div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

/**
 * 预定义的案例数据
 */
export const defaultCaseStudies: CaseStudy[] = [
  {
    id: 'bank-hft',
    company: '某大型投资银行',
    industry: '投资银行',
    challenge:
      '传统交易系统延迟过高，在高频交易中处于劣势，每日因延迟损失数百万美元。',
    solution: '部署CActor高频交易系统，实现微秒级延迟和百万级TPS处理能力。',
    results: [
      { metric: '交易延迟', value: '< 10μs', improvement: '降低95%' },
      { metric: '日处理量', value: '1.2M TPS', improvement: '提升300%' },
      { metric: '系统可用性', value: '99.99%', improvement: '提升0.5%' },
    ],
    quote: {
      text: 'CActor帮助我们在高频交易领域重新获得竞争优势，系统稳定性和性能都达到了行业领先水平。',
      author: '张总监',
      position: '技术总监',
    },
    tags: ['高频交易', '微秒延迟', '大规模并发'],
  },
  {
    id: 'fintech-ledger',
    company: '领先金融科技公司',
    industry: '金融科技',
    challenge:
      '传统数据库无法满足分布式账本的一致性和可追溯性要求，审计成本高昂。',
    solution: '采用CActor事件溯源架构，构建完全可追溯的分布式账本系统。',
    results: [
      { metric: '数据一致性', value: '100%', improvement: '完全保证' },
      { metric: '审计效率', value: '秒级查询', improvement: '提升1000%' },
      { metric: '存储成本', value: '节省60%', improvement: '大幅降低' },
    ],
    quote: {
      text: '事件溯源架构让我们的账本系统具备了完美的审计能力，监管合规变得非常简单。',
      author: '李CTO',
      position: '首席技术官',
    },
    tags: ['事件溯源', 'CQRS', '分布式账本'],
  },
  {
    id: 'payment-platform',
    company: '知名支付平台',
    industry: '第三方支付',
    challenge: '支付高峰期系统经常过载，用户体验差，客户投诉率居高不下。',
    solution: '基于CActor流处理架构重构支付系统，实现智能背压控制和故障自愈。',
    results: [
      { metric: '处理延迟', value: '< 100ms', improvement: '降低80%' },
      { metric: '系统吞吐', value: '50K TPS', improvement: '提升200%' },
      { metric: '客户投诉', value: '降低90%', improvement: '显著改善' },
    ],
    quote: {
      text: 'CActor的流处理能力让我们的支付系统在双11这样的极端场景下依然稳如磐石。',
      author: '王架构师',
      position: '首席架构师',
    },
    tags: ['实时支付', '流处理', '背压控制'],
  },
  {
    id: 'insurance-risk',
    company: '大型保险集团',
    industry: '保险',
    challenge: '传统风控系统响应慢，误报率高，影响客户体验和业务效率。',
    solution: '部署CActor智能风控系统，结合AI算法实现实时风险评估。',
    results: [
      { metric: '风险识别率', value: '99.2%', improvement: '提升15%' },
      { metric: '误报率', value: '< 0.1%', improvement: '降低95%' },
      { metric: '处理速度', value: '< 50ms', improvement: '提升20倍' },
    ],
    quote: {
      text: 'AI驱动的风控系统让我们能够在保障安全的同时，为客户提供更好的服务体验。',
      author: '陈总经理',
      position: '风控总经理',
    },
    tags: ['智能风控', 'AI决策', '实时评估'],
  },
  {
    id: 'securities-trading',
    company: '头部证券公司',
    industry: '证券交易',
    challenge: '交易系统在市场波动时容易出现性能瓶颈，影响客户交易体验。',
    solution: '采用CActor集群分片技术，构建弹性可扩展的交易系统。',
    results: [
      { metric: '并发用户', value: '100万+', improvement: '提升500%' },
      { metric: '交易成功率', value: '99.95%', improvement: '提升0.2%' },
      { metric: '系统扩展性', value: '线性扩展', improvement: '无限扩展' },
    ],
    quote: {
      text: 'CActor的分片技术让我们的交易系统具备了真正的弹性扩展能力，再也不用担心交易高峰。',
      author: '刘VP',
      position: '技术副总裁',
    },
    tags: ['证券交易', '集群分片', '弹性扩展'],
  },
  {
    id: 'digital-bank',
    company: '新兴数字银行',
    industry: '数字银行',
    challenge:
      '作为新银行需要快速构建完整的核心银行系统，传统方案周期长成本高。',
    solution: '基于CActor框架快速构建云原生核心银行系统，实现敏捷开发。',
    results: [
      { metric: '开发周期', value: '6个月', improvement: '缩短70%' },
      { metric: '系统成本', value: '节省50%', improvement: '大幅降低' },
      { metric: '上线速度', value: '提前1年', improvement: '快速上市' },
    ],
    quote: {
      text: 'CActor让我们能够以互联网的速度构建银行级的可靠系统，这在以前是不可想象的。',
      author: '周CEO',
      position: '首席执行官',
    },
    tags: ['数字银行', '云原生', '敏捷开发'],
  },
];

/**
 * 按行业分类的案例数据
 */
export const caseStudiesByIndustry = {
  'high-frequency-trading': defaultCaseStudies.filter(
    study => study.tags.includes('高频交易') || study.tags.includes('证券交易')
  ),
  'distributed-ledger': defaultCaseStudies.filter(
    study =>
      study.tags.includes('事件溯源') || study.tags.includes('分布式账本')
  ),
  'real-time-payment': defaultCaseStudies.filter(
    study => study.tags.includes('实时支付') || study.tags.includes('流处理')
  ),
  'intelligent-risk-control': defaultCaseStudies.filter(
    study => study.tags.includes('智能风控') || study.tags.includes('AI决策')
  ),
};
